/**
 * Card组件
 * @param props
 * @returns {*}
 * @constructor
 */
const Card = (props) => {
    return (
        <div class="card" id={props.id} data-key={props.index} onClick={choose.bind(this,props)}>
            <a>
                <div className="thumbnail">
                    <img src={props.image} alt="" />
                </div>
                <div className="title ellipsis">{props.article}</div>
                <div className="label">
                    <span className="user">{props.name}</span>
                </div>
            </a>
        </div>
    )
}

function choose(self,props) {
    console.log("self:",self,"props:",props)
}

/**
 * App组件
 */
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: Mock.mock({
                'cardList|1-30': [{ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
                    id: '@id()',// 属性 id 是一个自增数，起始值为 1，每次增 1
                    name: '@cname(3, 5)',
                    url: '@url("http","www.mock-api.com")',
                    image: "@image('200x150', '@hex', '@color', 'png', '@cname')",
                    article: '@cparagraph(5)'
                }]
            })
        }
    }
    componentDidMount() {
        console.log("-------------componentDidMount----------------")
        console.log(this.state)
    }

    componentWillUnmount() {
        console.log("-------------componentWillUnmount-------------")
    }
    /**
     * 添加
     * @param index
     */
    add(index) {
        let cardList = this.state.data.cardList
        const item = Mock.mock({
               // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
                id: '@id()',// 属性 id 是一个自增数，起始值为 1，每次增 1
                name: '@cname(3, 5)',
                url: '@url("http","www.mock-api.com")',
                image: "@image('200x150', '@hex', '@color', 'png', '@cname')",
                article: '@cparagraph(5)'

        })

        console.log("item:",item)
        cardList.push(item)
        this.setState({
            data:{
                cardList: cardList
            }

        })
    }

    /**
     * 删除
     * @param index
     */
    delete = (index) => {
        let cardList = this.state.cardList
        cardList.splice(index, 1)
        this.setState({
            cardList: cardList
        })
    }
    /**
     * 编辑
     * @param index
     */
    edit = (index) => {
        console.log(`编辑第${index}条`)
    }

    render() {
        const { data: { cardList }} = this.state
        const list = cardList.map((item, index) =>
            <Card index={index} id={item.id} name={item.name} url={item.url} image={item.image} article={item.article} />
        );
        return (
            <div className="container">
                <div className="header">
                    <div className="btn btn-add" onClick={this.add.bind(this)}>添加</div>
                    <div className="btn btn-edit" onClick={this.edit.bind(this)}>编辑</div>
                    <div className="btn btn-delete" onClick={this.delete.bind(this)}>删除</div>
                </div>
                <div className="main">
                    {list}
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
